<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation>
        <div slot="left">
          <el-row class="top_btn">
            <el-button type="primary" style="width: 100px;" @click="subpackage()">分包发货</el-button>
            <el-button type="primary" style="width: 100px;">导入</el-button>
            <el-button type="primary" style="width: 100px;" @click="received()">已收货</el-button>
            <el-button type="primary" style="width: 100px;" @click="crud.export('/oper/bomLogistics/download')">导出</el-button>
            <!-- @click="materialExport()"  -->
            <el-select v-model="crud.query.shipStat" placeholder="发货状态" style="width:150px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.bom_ship_stat" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-row>
        </div>
        <span slot="optsLeft">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
          <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
        </span>
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="selectionChangeHandler">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="bomApplyId" width="150" sortable label="物料申请编号"></el-table-column>
        <el-table-column prop="expressNo" width="150" sortable label="快递单号"></el-table-column>
        <el-table-column prop="parentProfession" width="150" sortable label="物流公司"></el-table-column>
        <el-table-column prop="logisticsStat" width="150" sortable label="物流状态">
          <template slot-scope="scope">
            {{ dict.label.bom_logistics_stat[scope.row.logisticsStat] }}
          </template>
        </el-table-column>
        <el-table-column prop="shipDate" width="150" sortable label="发货时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.shipDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shipStat" width="150" sortable label="发货状态">
          <template slot-scope="scope">
            {{ dict.label.bom_ship_stat[scope.row.shipStat] }}
          </template>
        </el-table-column>
        <el-table-column prop="apply_user" width="150" sortable label="申请人"></el-table-column>
        <el-table-column prop="receiver" width="150" sortable label="收货人"></el-table-column>
        <el-table-column prop="receiverPhone" width="150" sortable label="联系电话"></el-table-column>
        <el-table-column prop="receiverAddress" width="150" sortable label="收货地址"></el-table-column>
        <el-table-column prop="packageSeqName" width="150" sortable label="分包"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #02A7F0;" @click="materialDetail(scope.row)">查看详情</a>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
    <!-- dialong弹窗 -->
    <div class="dialog">
      <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        append-to-body
        :modal="false"
      >
        <span slot="title" class="dialog-title">物料详情</span>
        <detail-dialog v-if="dialogVisible" :material-obj="materialObj" :materialBomList="materialBomList"></detail-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogSave">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { confirmRecv, download } from '@/api/logisticsManage';
import { query } from '@/api/bom';
import CRUD, { presenter, header, form, crud } from '@crud/crud';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import { mapGetters } from 'vuex';
import { PROCESS_EN_TYPE } from '@/utils/index';
import detailDialog from '@/views/oper/material/detailDialog.vue';

const defaultForm = { id: null, patientName: null, gender: null, birthDay: null, compliance: null, parent: null, relationship: null, parentProfession: null, parentMobile: null, orthodonticHis: null, createDate: null, doctorId: null, clinicId: null, deptId: null, tags: null, star: null, photoUrl: null, productRuleId: null, packageRuleId: null, archived: null };
export default {
  name: 'Patient',
  components: { pagination, crudOperation, detailDialog },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['gender', 'patient_compliance', 'patient_parent_rel', 'patient_archive', 'bom_ship_stat', 'bom_logistics_stat'],
  cruds() {
    return CRUD({
      title: '物流单',
      url: '/oper/bomLogistics/queryPage',
      serverPath: PROCESS_EN_TYPE.VUE_APP_PRODUCT_API,
      query: {
        shipStat: '' // 发货状态
      },
      sort: 'id,desc',
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: true },
      optRightShow: {
        search: false,
        refresh: false
      }
    });
  },
  data() {
    return {
      dialogVisible: false,
      selectionList: [],
      materialObj: {},
      materialBomList: []
    };
  },
  computed: {
    ...mapGetters([
      'menusMap',
      'autoPath',
      'menusCode',
      'codes',
      'searchInfo'
    ])
  },
  watch: {
    searchInfo(newVal, oldVal) {
      console.warn(newVal.name, '||', oldVal.name);
    }
  },
  mounted() {
    console.log('bom_ship_stat', 'bom_logistics_stat----', this.dict.bom_ship_stat, this.dict.bom_logistics_stat);
    this.getMaterialBom();  // 获取物料
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    getMaterialBom(){
      query().then(res => {
        // console.log("res-----------",res);
        this.materialBomList = res;
      })
    },
    // 列表复选框
    selectionChangeHandler(val) {
      console.log(val);
      this.selectionList = val;
    },
    // 查看详情
    materialDetail(row) {
      console.log('row----------', row);
      this.dialogVisible = true;
      this.materialObj = row;
    },
    // 弹窗组件回调
    dialogSave() {
      this.dialogVisible = false;
    },
    // 已收货
    received() {
      const selectState = this.selectionList.length > 0 ? this.selectionList.filter(item => { return item.logisticsStat === 'SHIPPED'; }) : [];
      if (selectState.length === 0) {
        this.$notify({
          title: '提示',
          message: '请选择物流状态为“已发货”的物流单',
          type: 'warning',
          duration: 5000
        });
      } else {
        const param = selectState.reduce((previous, selectState) => {
          previous.push(selectState.id);
          return previous;
        }, []);
        confirmRecv(param[0]).then(res => {
          this.$notify({
            title: '提示',
            message: '确认收货成功',
            type: 'success',
            duration: 5000
          });
        });
      }
    },
    // 导出
    materialExport() {
      // TODO downloadObj 未初始化，需要
      const downloadObj = {};
      download(downloadObj).then(res => {
        const url = window.URL.createObjectURL(res);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;
        a.download = '物流单数据.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(er => {});
      // if(this.selectionList.length == 0){
      //   this.$notify({
      //     title: '提示',
      //     message: '请选择需要导出的物流单',
      //     type: 'warning',
      //     duration: 5000
      //   });
      // }else{
      //   const downloadObj = {
      //     shipStat: this.crud.query.shipStat
      //   };
      //   download(downloadObj).then(res => {
      //     const url = window.URL.createObjectURL(res);
      //     var a = document.createElement('a');
      //     document.body.appendChild(a);
      //     a.href = url;
      //     a.download = '物流单数据.xlsx';
      //     a.click();
      //     window.URL.revokeObjectURL(url);
      //   }).catch(er => {});
      // }
    },
    // 分包发货
    subpackage() {
      console.log('分包发货！');
      this.dialogVisible = true;
      this.materialObj = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .head-container {
    .top_btn{
      margin-bottom: 10px;
      .item {
        margin-top: 10px;
        margin-right: 30px;
      }
    }
    .search-tools {
      .tools-all {
        //   margin-top:10px;
        vertical-align: top;
      }
      .tools-right {
        display: inline-block;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
        .tools-group {
          .group-btns {
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 20px;
            .btn {
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
.crud-opts{
  align-items: flex-end;
  .crud-opts-right{
    width: 200px;
  }
}
</style>
